<template>
	<view class="container">
    <view class="bg-trans"></view>
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="fuel-info">
      <view class="station-title">
        <view class="station-img">
          <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/station-default.png" />
        </view>
        <view class="title-text">
          <p class="name">{{ stationDetails.stationName }}</p>
          <view class="tags">
            <view class="tag" v-for="item in tagsList" :key="item">{{item}}</view>
          </view>
          <p class="openTime">{{stationDetails.busineHours}}</p>
        </view>
      </view>
      <view class="position-info" @click="gohere(stationDetails)">
        <view>
          <view class="road">
            {{ stationDetails.address }}
            <uni-icons type="right" size="13" color="#9D9D9D"></uni-icons>
          </view>
          <view class="station-distance">
            <view class="distance">
              距您{{ stationDetails.distance || 0 }}km
            </view>
          </view>
          <view class="recentlyInfo">
            <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/wifi.png" />
            <span class="time">{{stationDetails.lastChargeStr}}</span>有人充电
          </view>
        </view>
        <view class="position-r">
          <view class="navigateIco">
            <uni-icons type="paperplane-filled" size="16" color="#FFFFFF"></uni-icons>
          </view>
          <p class="sub">导航</p>
        </view>
      </view>
    </view>

    <view class="totalCargeGun">
      <view class="totalPanel">
        <view class="trapezoid"><text>快充</text></view>
        <view class="emptyGun">空闲<span class="num">{{ stationDetails.freeNozCnt }}<span class="total">/{{ stationDetails.nozCnt }}</span></span></view>
        <view class="maxPw">最大功率：120KW</view>
      </view>
    </view>

    <view class="charge-electric">
			<view class="electric-title">
				<view class="title">
					费用说明
          <span class="current">（当前计费时段：{{currentTimeSlot}}）</span>
				</view>
				<view class="discount" @click="checkBillingRules">
					计费详情 <uni-icons class="icon_right" type="forward" color="#939391" size="15"></uni-icons>
				</view>
			</view>
			<view class="now_date_price">
				<view class="date_price currentPrice">
          <view class="notVip">
            <p class="title">非会员价</p>
            <p><span class="price">￥{{currentTimeSlotPrice}}</span>元/度</p>
          </view>
          <view class="vip">
            <p class="title">会员价</p>
            <p><span class="price">￥{{currentTimeSlotVipPrice}}</span>元/度</p>
          </view>
				</view>
			</view>
		</view>
		<view class="connectors">
			<view class="item" v-for="(item, index) in stationDetails.connectors" :key="index"
				@click="jumpConfirmChargeFn(item)">
				<view class="status" :class="connectorStatusClassMap[item.connectorStatus]" v-if="item.connectorStatus !== 3">
					<text>{{connectorStatusMap[item.connectorStatus]}}</text>
				</view>
        <view class="liquidBall" v-else>
          <l-liquid size="112rpx" background="#CFEAE34D" waveColor="#8eb9ac" :current="modelVale" :percent="getCurrentSoc(item.soc)">
            <view style="color: #006241;font-size: 32upx;font-weight: 700;">充电中</view>
          </l-liquid>
        </view>
				<view class="info">
					<view class="connectorName">
						<text>{{item.connectorName}}</text>
					</view>
					<view class="connectorType">
						<text>{{connectorTypeMap[item.connectorType]}}</text>
            <text>快充</text>
					</view>
          <view class="gunNumber">电桩编号：{{item.connectorId}}</view>
					<view class="electricity_info">
						<view class="power">
							<text>{{item.power}}KW</text>
						</view>
						<view class="voltage">
							<text>{{item.voltageLowerLimits}}V-{{item.voltageUpperLimits}}V</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="collect">
				<!-- <image src="http://wx.xiongmaovip.com/miniapp/static/center/check.png" mode=""></image>
				<text>收藏</text> -->
        <view class="price">
          <!-- <text>非会员价：</text><text>￥</text><text>{{currentTimeSlotPrice}}</text><text>元/度</text> -->
          <view class="">
            <text>会员价格</text><text></text><text>{{currentTimeSlotVipPrice}}</text><text>元/度</text>
          </view>
          <view class="notVip">
            <text>非会员价格</text><text></text><text class="currentPrice">{{currentTimeSlotPrice}}</text><text>元/度</text>
          </view>
        </view>
			</view>
			<view class="right_content">
				<view class="scan-code" @click="scan()">
					<view class="scan">
						扫码充电
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStationInfo,
		chargeAuth
	} from '@/api/index'
	import {
		feeSplitVal,
		checkAuditTime,
		toast
	} from '@/utils/common'
  import mvBar from "@/components/mysNavBar";
  import evanRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue";
  import evanRadio from "@/components/evan-radio/evan-radio.vue";

  export default {
    components: {
      mvBar, evanRadioGroup, evanRadio
    },
		data() {
			return {
				stationId: '', // 站点ID
				stationDetails: {}, // 站点详情
				stationImgList: [], // 站点图片
				timeSlotCostData: [], // 各时段电费服务费
				currentTimeSlot: '', //当前时段
				currentTimeSlotPrice: 0, // 当前时段价格
				currentTimeSlotVipPrice: 0, // 当前时段会员价格
				connectorTypeMap: {
					'1': '家用',
					'2': '交流',
					'3': '交流',
					'4': '直流'
				},
				connectorStatusMap: {
					'1': '空闲',
					'2': '已占用', // 未充电
					'3': '充电中', // 充电中
					'4': '被预约', // 被预约
					'255': '故障',
				},
        connectorStatusClassMap:{
          '1': 'empty',
          '2': 'used', // 未充电
          '3': 'charging', // 充电中
          '4': 'order', // 被预约
          '255': 'error',
        },
				option: {},
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          leftText: {
            text: "",
            color: "",
            fontSize: "48upx", // px upx rpx, // px upx rpx
            fontWeight: "", // 100 - 700
          },
          /* 定义右侧图标 */
          // rightIconPath: "../static/header/collected.png",
        },
        tagsList: [
          '快充',  '24小时',
          // '充电险', '免费停车',
        ],
        modelVale: 100,
        target: 56,

			};
		},
		onLoad(option) {
			this.stationId = option.stationId
			this.option = option
			this.getStationDetailsFn(option)
		},
		onPullDownRefresh() {
			this.stationDetails = {}
			this.stationImgList = []
			this.timeSlotCostData = []
			this.getStationDetailsFn(this.option);
		},
		methods: {
			// 获取站点详情
			getStationDetailsFn(obj) {
				uni.stopPullDownRefresh()
				getStationInfo({
					lat: obj.lat,
					lng: obj.lng,
					stationId: this.stationId
				}).then(res => {
					if (res) {
						this.stationDetails = res
						this.stationImgList = res.pictures ? res.pictures.split(';') : []
						this.timeSlotCostData = this.stationDetails.periodPriceList
						if (this.timeSlotCostData.length) {
							for (let i = 0; i < this.timeSlotCostData.length; i++) {
								this.timeSlotCostData[i].currentTimeSlotStatus = false
								if (checkAuditTime(this.timeSlotCostData[i].period.split('~')[0], this
										.timeSlotCostData[i].period.split('~')[1])) {
									this.timeSlotCostData[i].currentTimeSlotStatus = true
									this.currentTimeSlot = this.timeSlotCostData[i].period
									this.currentTimeSlotPrice = (Number(this.timeSlotCostData[i].eleFee) + Number(
										this.timeSlotCostData[i].serFee)).toFixed(2)
									this.currentTimeSlotVipPrice = (Number(this.timeSlotCostData[i].eleFeeVip) +
										Number(this.timeSlotCostData[i].serFeeVip)).toFixed(2)
								}
							}
							console.log(this.timeSlotCostData, 'this.timeSlotCostData')
						}
					} else {
						console.log(res, 'error')
					}
				}).catch(error => {
					console.log(error)
				})
			},
      getCurrentSoc(val){
        if (val)
          return Math.floor(val)
        else
          return 0
      },
			// 跳转确认充电页面
			jumpConfirmChargeFn(data) {
				console.log(data, 'data')
				if (data.connectorStatus === 3) { // 充电中
					const userOpenId = uni.getStorageSync('userOpenId')
					if (data.openid === userOpenId) {
						uni.navigateTo({
							url: '../close-charge/index?connectorId=' + data.connectorId + '&startChargeSeq=' +
								data.startChargeSeq
						})
					} else {
						uni.navigateTo({
							url: '../confirm-charge/index?connectorId=' + data.connectorId + '&stationId=' + this
								.stationId
						})
					}
				} else {
					uni.navigateTo({
						url: '../confirm-charge/index?connectorId=' + data.connectorId + '&stationId=' + this
							.stationId
					})
				}
			},

			// 过滤查询油枪数据
			filterConnectorsInfo(connectorId) {
				const connectors = this.stationDetails.connectors
				for (let i in connectors) {
					const tempConnectorId = connectors[i].connectorId
					if (connectorId == tempConnectorId) {
						this.jumpConfirmChargeFn(connectors[i])
						return
					}
				}
			},
			scan() {
				// 吊起扫码API(H5无效)
				const _this = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// hlht://5101810039102.395815801/
						if (res.result) {
							const scanUrl = res.result
							if(scanUrl.match(/connectorId=(\S*)&stationId=/)){
								let str = scanUrl.match(/connectorId=(\S*)&stationId=/)[1]
								_this.filterConnectorsInfo(str)
								return
							}
							let strVal = scanUrl.split('.')[0]
							const startIndex = strVal.lastIndexOf('//')
							const endIndex = strVal.length
							const connectorId = strVal.substr(startIndex + 2, endIndex)
							_this.filterConnectorsInfo(connectorId)
						}
					}
				})
			},
			//打开地图
			gohere(data) {
				if (this.option.lat && this.option.lng) {
					uni.openLocation({
						latitude: data.lat,
						longitude: data.lng,
						name: data.stationName,
						address: data.address
					})
					return
				}
				toast('请先授权获取位置')
			},
			// 查看计费详情
			checkBillingRules() {
				uni.navigateTo({
					url: '../billing-rules/index?stationId=' + this.stationId
				})

				// uni.navigateTo({
				// 	url:'../confirm-charge/index?connectorId=123322123&startChargeSeq=ereraew1232323'
				// })

				// uni.reLaunch({
				// 	url:'/pages/panda-charge/order-details/index?startChargeSeq=err3422yu'
				// })

				// uni.reLaunch({
				// 	url:'/pages/panda-charge/close-charge/index'
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container {
    box-sizing: border-box;
		padding: 40rpx 28rpx 140rpx 28rpx;

    .bg-trans{
      position: fixed;
      left: 0;
      top: 0;
      background: linear-gradient(180deg, #183E31 11.25%, rgba(24, 62, 49, 0.844456) 54.2%, rgba(24, 62, 49, 0.735993) 66.57%, rgba(24, 62, 49, 0.662621) 72.57%, rgba(24, 62, 49, 0.517732) 79.59%, rgba(24, 62, 49, 0.296756) 88.87%, rgba(24, 62, 49, 0) 100%);
      width: 100%;
      height: 520upx;
      z-index: -1;
    }

    .totalCargeGun{
      box-sizing: border-box;
      width: 100%;
      padding: 20upx;
      background: #FFFFFF;
      border-radius: 24upx;
      margin-top: 20upx;
      .totalPanel{
        width: 100%;
        height: 80upx;
        border: 2upx solid #C2A661;
        border-radius: 16upx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .maxPw{
          position: absolute;
          right: 20upx;
          font-size: 24upx;
          color: #6A6A6A;
        }
        .emptyGun{
          font-size: 28upx;
          color: #1B1B1B;
          margin-left: 16upx;
          .num{
            margin-left: 8upx;
            font-weight: 700;
            letter-spacing: 4upx;
            font-size: 36upx;
            .total{
              color: #9D9D9D;
            }
          }
        }
        .trapezoid{
          width: 140upx;
          color: #FFFFFF;
          text-align: center;
          line-height: 80upx;
          font-size: 32upx;
          font-weight: 700;
          position: relative;
          background-image: url("http://wx.xiongmaovip.com/miniapp/static/chargeFuel/total-charge-icon.png");
          background-size: 140upx 80upx;
          background-repeat: no-repeat;
        }
      }
    }

		//.fuel-info {
		//	background-color: #ffffff;
		//	padding: 24rpx 32rpx;
		//	border-radius: 16rpx;
		//	background: linear-gradient(to bottom, #d9edff, 20%, #ffffff);
    //
		//	.station_info {
		//		display: flex;
		//		align-items: center;
		//		justify-content: space-between;
    //
		//		.station_name {
		//			font-size: 34rpx;
		//			font-weight: 500;
		//			color: #2d2b2a;
		//		}
    //
		//		.station-distance {
		//			display: flex;
		//			align-items: center;
    //
		//			.icon {
		//				image {
		//					width: 18rpx;
		//					height: 18rpx;
		//				}
		//			}
    //
		//			.distance {
		//				font-size: 26rpx;
		//				font-weight: 500;
		//				color: #2d2b2a;
		//			}
		//		}
		//	}
    //
		//	.charge-time {
		//		font-size: 24rpx;
		//		margin: 14rpx 0rpx;
		//		color: #939391;
		//	}
    //
		//	.road-posion {
		//		display: flex;
		//		justify-content: space-between;
    //
		//		.road {
		//			font-size: 24rpx;
		//		}
    //
		//		.posion {
		//			display: flex;
		//			flex-direction: column;
		//			align-items: center;
		//			font-size: 24rpx;
    //
		//			image {
		//				width: 30rpx;
		//				height: 30rpx;
		//			}
		//		}
		//	}
    //
		//	.swiper {
		//		height: 180rpx;
		//		overflow-x: auto;
		//		width: 100%;
		//		white-space: nowrap; // 滚动必须加的属性
		//		margin-top: 30rpx;
		//		box-sizing: border-box; // 内边框的设置，避免外边框导致右侧的边框不被展示
    //
		//		.swiper-item {
		//			width: 320rpx;
		//			height: 160rpx;
		//			display: inline-block; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
		//			margin-right: 20rpx;
    //
		//			.image {
		//				border-radius: 18rpx;
		//				width: 100%;
		//				height: 100%;
    //
		//				image {
		//					border-radius: 18rpx;
		//					width: 100%;
		//					height: 100%;
		//				}
		//			}
		//		}
		//	}
    //
		//	.notice {
		//		background-color: #f8f8f8;
		//		display: flex;
		//		align-items: center;
		//		height: 70rpx;
		//		border-radius: 10rpx;
		//		align-items: center;
		//		padding: 0px 20rpx;
		//		margin: 20rpx 0px 20rpx 0rpx;
    //
		//		image {
		//			width: 30rpx;
		//			height: 30rpx;
		//		}
    //
		//		text {
		//			font-size: 24rpx;
		//			margin-left: 10rpx;
		//		}
		//	}
    //
		//	.indulgence {
		//		width: 125rpx;
		//		background-color: #e1ffbe;
		//		color: #6ddc6b;
		//		font-size: 24rpx;
		//		line-height: 40rpx;
		//		text-align: center;
		//	}
		//}


    .fuel-info {
      padding: 20rpx 20rpx;
      background: #FFFFFF;
      border-radius: 24upx;
      //background-image: url('https://i.postimg.cc/Jhj7qHrF/place-order-bg.png');
      //background-repeat: no-repeat;
      background-size: 100% 100%;

      .station-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 20upx;
        border-bottom: 1upx solid #F0F1F2;

        .station-img {
          width: 112upx;
          height: 112upx;
          border-radius: 16upx;
          margin-right: 16upx;
          flex-shrink: 0;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
        }

        .title-text {
          .openTime{
            font-size: 24upx;
            padding-left: 8upx;
            margin-top: 8upx;
          }
          .name {
            font-weight: 700;
            font-size: 32upx;
            line-height: 48upx;
            color: #1B1B1B;
          }

          .tags {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .tag {
              margin-top: 8upx;
              margin-right: 8upx;
              background: #FFF8EA;
              padding: 0 16upx;
              line-height: 44upx;
              color: #C99227;
              font-size: 24upx;
            }
          }
        }
      }

      .position-info{
        display: flex;
        justify-content: space-between;
        align-content: center;
        margin-top: 20upx;
        .position-r{
          width: 60upx;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;
          .navigateIco{
            width: 48upx;
            height: 48upx;
            background: #006241;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .sub{
            margin-top: 4upx;
            font-size: 24upx;
            color: #6A6A6A;
          }
        }
        .station-distance {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 8upx;

          .station-name {
            font-size: 34rpx;
            color: #2D2B2A;
            line-height: 48rpx;
          }

          .distance {
            font-size: 24rpx;
            color: #9D9D9D;
            line-height: 36rpx;
          }
        }
        .recentlyInfo{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 8upx;
          font-size: 24upx;
          color: #6A6A6A;
          .time{
            color: #1B1B1B;
            margin: 0 8upx;
          }
          image{
            width: 24upx;
            height: 24upx;
          }
        }
        .road {
          font-size: 28rpx;
          color: #1B1B1B;
          line-height: 36rpx;
        }
      }

      .fuel-base {
        display: flex;
        align-items: center;


        .base-item {
          padding: 4rpx 8rpx;
          background: rgba(71, 139, 255, 0.09);
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          font-size: 24rpx;
          color: #478BFF;
          line-height: 34rpx;
        }
      }
    }

		.charge-busy {
			margin-top: 30rpx;
			padding: 38rpx 28rpx;
			background-color: #ffffff;
			border-radius: 18rpx;

			.busy-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: 600;
				}

				.title-details {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						color: #e7e7e7;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.busy-list {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.busy-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						&:nth-child(1) {
							font-size: 40rpx;
							font-weight: 500;
						}

						&:nth-child(2) {
							font-size: 26rpx;
							color: #b5b5b5;
						}
					}
				}
			}
		}

		.charge-electric {
			margin-top: 20rpx;
			padding: 28rpx 20rpx;
			background-color: #ffffff;
			border-radius: 24rpx;

			.electric-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: 500;
					color: #2d2b2a;
					font-size: 32rpx;
          display: flex;
          align-items: center;
          .current{
            margin-left: 8upx;
            color: #6A6A6A;
            font-size: 24upx;
            font-weight: normal;
          }
				}

				.discount {
					font-size: 26rpx;
					font-weight: 400;
					color: #939391;

					.icon_right {
						vertical-align: middle;
					}
				}
			}

			.now_date_price {
				padding-top: 10rpx;

				.date {
					text {
						display: inline-block;
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
						background-color: #f3f5f7;
						font-weight: 400;
						color: #939391;
						font-size: 24rpx;
					}
				}

        .currentPrice{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24upx;
          color: #6A6A6A;
          .title{
            margin-bottom: 8upx;
          }

          .price{
            font-size: 36upx;
            color: #1B1B1B;
            font-weight: 700;
            margin-right: 12upx;
          }

          .notVip{
            box-sizing: border-box;
            width: 50%;
            height: 110upx;
            background-image: url("http://wx.xiongmaovip.com/miniapp/static/chargeFuel/notVip.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 12upx 32upx;
          }
          .vip{
            box-sizing: border-box;
            width: 50%;
            height: 110upx;
            background-image: url("http://wx.xiongmaovip.com/miniapp/static/chargeFuel/vip.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 12upx 46upx;
            .title,.price{
              color: #C99227;
            }
          }

        }

				.date_price {
					padding-top: 20rpx;

					.title {
						font-size: 24rpx;
						color: #333333;
					}

					.unit {
						font-size: 24rpx;
						color: #e56646;
					}

					.val {
						font-size: 28rpx;
						font-weight: 500;
						color: #e56646;
					}

					.yd {
						font-size: 26rpx;
						font-weight: 400;
						color: #2d2b2a;
					}
				}
			}

			.electric-list {
				margin-top: 30rpx;

				.electric-header {
					background-color: #f0f0f0;
					color: #3e3e3e;
					font-size: 26rpx;
					display: flex;
					padding: 15rpx 20rpx;

					.time {
						width: 35%;
					}

					.electricity-price {
						width: 35%;
					}

					.eq {
						width: 5%;
					}

					.price {
						width: 10%;
					}

					.add {
						width: 5%;
					}

					.service-price {
						width: 15%;
					}
				}

				.electric-item {
					background-color: #f0f0f0;
					color: #3e3e3e;
					font-size: 24rpx;
					display: flex;
					padding: 10rpx 20rpx;
					margin-top: 20rpx;

					.time {
						width: 35%;
					}

					.electricity-price {
						width: 35%;
					}

					.eq {
						width: 5%;
					}

					.price {
						width: 10%;
					}

					.add {
						width: 5%;
					}

					.service-price {
						width: 15%;
					}
				}

				.current_time_slot {
					border: 1px solid #ffaa00;
				}
			}
		}

		.connectors {
			margin-top: 24rpx;
			background-color: #ffffff;
			border-radius: 24rpx;

			.item {
				padding: 32rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				border-bottom: 1px solid #f3f5f7;
				position: relative;

				.status {
					width: 112rpx;
					height: 112rpx;
					line-height: 112rpx;
					border-radius: 50%;
					background-color: #D1F8FF4D;
					text-align: center;
					font-weight: 500;
					color: #289FEA;
					font-size: 28rpx;
          border: 4upx solid #289FEA;
          &.used{
            border-color: #C99227;
            color: #C99227;
            background: #FFF8EA;
          }
          &.charging{
            border-color: #006241;
            background: #CFEAE34D;
            color: #006241;
          }
          &.order{
            border-color: #F57546;
            color: #F57546;
            background: #FEEEE8;
          }
          &.error{
            border-color: #C4C7CC;
            color: #C4C7CC;
            background: #F8F8F9;
          }

				}

        .liquidBall{
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
          border: 4upx solid #006241;
          //display: flex;
          //justify-content: center;
          //align-items: center;
        }

				.occupy_status {
          border-color: #006241;
					background: #CFEAE34D;
					color: #006241;
				}

				.info {
					padding-left: 20rpx;

					.connectorName {
						font-weight: 500;
						color: #2d2b2a;
						font-size: 28rpx;
					}

          .gunNumber{
            font-size: 24upx;
            color: #1B1B1B;
            font-weight: 500;
            line-height: 36upx;
            margin-top: 8upx;
          }

					.connectorType {
						padding-top: 10rpx;

						text {
							display: inline-block;
							background-color: #FFF8EA;
							border-radius: 4rpx;
							padding: 4rpx 16rpx;
							text-align: center;
							color: #C99227;
							font-size: 24rpx;
              margin-right: 8upx;
						}
					}

					.electricity_info {
						//padding-top: 20rpx;
            margin-top: 8upx;
						display: flex;
						font-weight: 400;
						color: #9D9D9D;
						font-size: 26rpx;

						.power {
							padding-right: 20rpx;
						}

						.voltage {
							padding-left: 20rpx;
						}
					}
				}

				.time {
					position: relative;
					margin-left: auto;
					min-width: 142rpx;
					height: 40rpx;
					line-height: 40rpx;
					padding: 4rpx 0 4rpx 28rpx;
					background: linear-gradient(to right, #edf4ff, 50%, #ffffff);
					font-weight: 500;
					color: #478bff;
					font-size: 24rpx;
					text-align: center;

					.rectangle {
						height: 55rpx;
						width: 30rpx;
						background: #ffffff;
						position: absolute;
						left: -16rpx;
						top: -10rpx;
						transform: rotate(30deg);
					}
				}

				.speed {
					width: 40rpx;
					height: 40rpx;
					border-radius: 8rpx;
					background: linear-gradient(to bottom, #47c2ff, #478bff);
					font-weight: 500;
					color: #ffffff;
					font-size: 26rpx;
					text-align: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}

			.item:active {
				background-color: #eeeeee;
			}
		}

		.submit {
			width: 100%;
			left: 0;
			right: 0;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			border-top: 1rpx #efefef solid;
			justify-content: space-between;
			height: 120rpx;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
      z-index: 99;

			.collect {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 30rpx;

        .price {
          text-align: left;
          //color: #006241;

          .notVip{
            .currentPrice{
              color: #6A6A6A;
              font-size: 28upx;
            }
            text{
              &:nth-child(4) {
                font-size: 24rpx;
                color: #6A6A6A;
              }
            }
          }

          text {
            &:nth-child(1) {
              font-size: 24rpx;
              color: #333333;
              margin-right: 8upx;
            }

            &:nth-child(2) {
              font-size: 24rpx;
            }

            &:nth-child(3) {
              font-size: 40rpx;
              color: #006241;
              font-weight: 500;
            }

            &:nth-child(4) {
              font-size: 24rpx;
              color: #006241;
            }
          }
        }

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 28rpx;
				}
			}

			.right_content {
				display: flex;
				align-items: center;

				.scan-code {
					margin-left: 24rpx;
					display: flex;
					align-items: center;
					background: #006241;
					margin-right: 30rpx;
					padding: 20rpx 44rpx;
					border-radius: 60upx;

					.scan {
						font-size: 28rpx;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
		}
	}
</style>